<template>
  <div class="order-play combground">
    <div class="container">
      <div class="title comtitle">
        <h2 class="comh2">订单提示</h2>
      </div>
      <div class="content">
        <div class="tips">
          <img src="~/assets/images/order.png" alt="" />
          订单提交成功！订单号：{{ info.group_order_sn }}
        </div>
        <div class="code textcenter textBold f20 corMain">提交成功！</div>
        <router-link
          :to="{ name: 'MyOrder', query: { state: -1 } }"
          class="into-order"
        >
        去支付
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import Clipboard from "clipboard"
import { myOrderPayment } from "@/request/api"
export default {
  name: "OrderPayment",
  data() {
    return {
      id: "",
      info: "",
      code: "SDF456",
      res: "复制成功！"
    }
  },
  created() {
    this.id = this.$route.query.order_id
    this.getInfo()
  },
  methods: {
    getInfo() {
      myOrderPayment(this.id)
        .then((res) => {
          this.info = res.data
        })
        .catch((err) => {
          this.$message.error(err.message)
        });
    },
    copy() {
      const clipboard = new Clipboard('.coplay-code')
      clipboard.on("success", (e) => {
        this.$toast.show(this.res, 6000)
        // 释放内存
        clipboard.destroy()
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        console.log("该浏览器不支持自动复制")
        // 释放内存
        clipboard.destroy()
      })
    }
  }
}
</script>

<style scoped>
.order-play {
  padding: 127px 0 112px;
}
.order-play .content {
  width: 100%;
  font-size: 16px;
  padding: 70px 200px 81px 200px;
  color: #4d4d4d;
  background: #fff;
  margin-top: 51px;
}
.order-play .content .tips {
  font-size: 20px;
  font-weight: bold;
  color: #e48b2c;
}
.order-play .content .tips img {
  vertical-align: middle;
  margin-right: 18px;
}
.code {
  margin: 30px 0 25px;
}
.code b {
  color: #3dabd9;
  font-size: 24px;
  font-weight: bold;
}
.coplay-code {
  width: 144px;
  height: 45px;
  background: #f3f4f7;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
}
.into-order {
  display: block;
  width: 235px;
  margin: 60px auto 0;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  background: #e48b2c;
  border-radius: 10px;
}
</style>
